﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>陪你度日日夜夜</title>  
    <style>
        body {
            
            margin: 0;
            padding: 0;
        }

        #container {
            
            height: 100vh;
        }

        .bg {
           
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .sun {
            margin: 0;
            padding: 0;
            
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 600px;
            height: 600px;
            background-color: orange;
            border-radius: 50%;
        }

        .moon {
            margin: 0;
            padding: 0;
            
            position: absolute;
            top: 50%;
            left: 50%;
           
            transform: translate(calc(-50% + -160px),calc(-50% + -180px));
            width: 600px;
            height: 600px;
            
            box-shadow: 160px 180px 0 cyan;
            border-radius: 50%;
        }

        .sea {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 35%;
            /* 背景模糊制造大海的感觉 */
            backdrop-filter: blur(100px);
            -webkit-backdrop-filter: blur(100px);
            z-index: 100;
        }

        .sun,
        .moon,
        .sun-box,
        .moon-box,
        .bg {
            /* 添加动画过渡 */
            transition: all 1s ease-in-out;
        }

        .sun-box,
        .moon-box {
            /* 相对定位 */
            position: relative;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        /* 白天 */
        .light .sun-box {
            height: 100%;
        }

        .light .moon-box {
            height: 0;
        }

        .light .bg {
            background-color: #ffeea2;
        }
        /* 夜晚 */
        .dark .sun-box {
            height: 0;
        }

        .dark .moon-box {
            height: 100%;
        }

        .dark .bg {
            background-color: #040720;
        }
        /* 切换按钮样式 */
        .btn-box {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 101;
            display: flex;
            flex-direction: row;
        }

            .btn-box div {
                background: rgba(255,255,255,0.7);
                color: #000;
                width: 90px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin: 5px;
                font-size: 14px;
                border-radius: 5px;
                cursor: pointer;
            }

                .btn-box div:hover {
                    background: #fff;
                }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        function change(str){
            document.getElementById('container').setAttribute('class',str);
        }
    </script>
</head>

<body>
    <div class="btn-box">
        <div onclick="change('light')">
            <i class="fa fa-sun-o" aria-hidden="true"></i> 日积蹉
        </div>
        <div onclick="change('dark')">
            <i class="fa fa-moon-o" aria-hidden="true"></i> 月累跎
        </div>
    </div>
    <div class="light" id="container">
        <div class="bg"></div>
        <div class="moon-box">
            <div class="moon"></div>
        </div>
        <div class="sun-box">
            <div class="sun"></div>
        </div>
        <div class="sea"></div>
    </div>
</body>

</html>